<template>
	<div class="scroll-container" id="scroll_container">
		<!-- 列表 start -->
		<view class="list uv-flex-row" :style="{transform:`translateX(-${translatex}px) translateY(-50%)`}">
			<slot></slot>
		</view>
		<!-- 列表 end -->
		<template v-if="scroll.showBtn">
			<!-- 拖动条 start -->
			<view class="indicator">
				<movable-area class="movable-area">
					<movable-view :x="movablex" :animation="false" class="movable-view uv-flex-row" direction="horizontal" @change="movableChange" :style="[{width:barWidth+'px' }]">
						<svg xmlns="http://www.w3.org/2000/svg" :width="barWidth" height="8" :viewBox="`0 0 ${barWidth} 8`" fill="none">
							<rect :width="barWidth" height="8" rx="4" fill="#A9A9FF" />
							<template v-for="(item,index) in barDotCount" :key="index">
								<rect :x="8+(index+1-1)*6" y="2" width="1" height="4" fill="white" />
							</template>
						</svg>
					</movable-view>
				</movable-area>
			</view>
			<!-- 拖动条 end -->
			<!-- 左右点击按钮 start -->
			<view class="scroll-btn scroll-btn-left" v-if="scroll.percentage>0" @click="scrollBtnClick(-1)">
				<svg xmlns="http://www.w3.org/2000/svg" width="80" height="81" viewBox="0 0 80 81" fill="none">
					<g opacity="0.7" filter="url(#filter0_d_314_11)">
						<circle cx="40" cy="28" r="28" fill="#58587C" />
					</g>
					<path
						d="M36.1995 43.9948C35.6627 43.9948 35.214 43.8114 34.848 43.435L21.548 29.8777C21.1816 29.501 21 29.0435 21 28.5C21 27.951 21.1816 27.4935 21.548 27.1223L34.848 13.5598C35.2143 13.1829 35.6627 13 36.1995 13C36.7431 13 37.1976 13.1829 37.5571 13.549C37.9181 13.9204 38.0992 14.3834 38.0992 14.9375C38.0992 15.481 37.9156 15.9385 37.5508 16.3152L27.4846 26.5625H57.0992C57.6236 26.5625 58.0705 26.7511 58.4427 27.1277C58.8143 27.5096 59 27.9616 59 28.5C59 29.0329 58.8143 29.4902 58.4427 29.8671C58.0703 30.2489 57.6234 30.4375 57.0995 30.4375H27.4846L37.5508 40.6848C37.9156 41.056 38.0992 41.519 38.0992 42.0625C38.0992 42.6169 37.9181 43.0798 37.5571 43.4456C37.1976 43.8171 36.7431 44 36.1995 44V43.9948Z"
						fill="#DFE0DE" />
					<defs>
						<filter id="filter0_d_314_11" x="0.8" y="0" width="78.4" height="80.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix" />
							<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
							<feOffset dy="13" />
							<feGaussianBlur stdDeviation="5.6" />
							<feComposite in2="hardAlpha" operator="out" />
							<feColorMatrix type="matrix" values="0 0 0 0 0.584482 0 0 0 0 0.584482 0 0 0 0 0.744956 0 0 0 0.26 0" />
							<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_314_11" />
							<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_314_11" result="shape" />
						</filter>
					</defs>
				</svg>
			</view>
			<view class="scroll-btn scroll-btn-right" v-if="scroll.percentage<100" @click="scrollBtnClick(1)">
				<svg xmlns="http://www.w3.org/2000/svg" width="80" height="81" viewBox="0 0 80 81" fill="none">
					<g opacity="0.7" filter="url(#filter0_d_314_7)">
						<circle cx="40" cy="28" r="28" fill="#58587C" />
					</g>
					<path
						d="M43.8005 13.0052C44.3373 13.0052 44.786 13.1886 45.152 13.565L58.452 27.1223C58.8184 27.499 59 27.9565 59 28.5C59 29.049 58.8184 29.5065 58.452 29.8777L45.152 43.4402C44.7857 43.8171 44.3373 44 43.8005 44C43.2569 44 42.8024 43.8171 42.4429 43.451C42.0819 43.0796 41.9008 42.6166 41.9008 42.0625C41.9008 41.519 42.0844 41.0615 42.4492 40.6848L52.5154 30.4375H22.9008C22.3764 30.4375 21.9295 30.2489 21.5573 29.8723C21.1857 29.4904 21 29.0384 21 28.5C21 27.9671 21.1857 27.5098 21.5573 27.1329C21.9297 26.7511 22.3766 26.5625 22.9005 26.5625H52.5154L42.4492 16.3152C42.0844 15.944 41.9008 15.481 41.9008 14.9375C41.9008 14.3831 42.0819 13.9202 42.4429 13.5544C42.8024 13.1829 43.2569 13 43.8005 13V13.0052Z"
						fill="#DFE0DE" />
					<defs>
						<filter id="filter0_d_314_7" x="0.8" y="0" width="78.4" height="80.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix" />
							<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
							<feOffset dy="13" />
							<feGaussianBlur stdDeviation="5.6" />
							<feComposite in2="hardAlpha" operator="out" />
							<feColorMatrix type="matrix" values="0 0 0 0 0.584482 0 0 0 0 0.584482 0 0 0 0 0.744956 0 0 0 0.26 0" />
							<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_314_7" />
							<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_314_7" result="shape" />
						</filter>
					</defs>
				</svg>
			</view>
			<!-- 左右点击按钮 end -->
		</template>
	</div>
</template>
<script setup>
	import { reactive, nextTick, onMounted, getCurrentInstance, computed, onBeforeUnmount } from 'vue';
	const { ctx } = getCurrentInstance();
	const rect = reactive({
		windowWidth: 1,
		listWidth: 1,
		indicatorWidth: 1,
		containerWidth: 1
	})
	const scroll = reactive({
		percentage: 0,
		showBtn: true,
		status: ''
	})
	onMounted(() => {
		getRect();
		wheelEvent();
		window.addEventListener('resize', getRect);
	})
	onBeforeUnmount(() => {
		window.removeEventListener('resize', getRect);
	})
	const movablex = computed(() => {
		return (rect.indicatorWidth - barWidth.value) * (scroll.percentage / 100);
	})
	const translatex = computed(() => {
		return (scroll.percentage / 100) * (rect.listWidth - rect.containerWidth);
	})
	// bar的宽度
	const barWidth = computed(() => {
		return rect.indicatorWidth * (rect.windowWidth / rect.listWidth);
	})
	// bar中的点的个数
	const barDotCount = computed(() => {
		const count = (Math.floor(barWidth.value / 6) - 1);
		return count > 1 ? count : 1;
	})
	// 获取节点信息
	async function getRect() {
		scroll.showBtn = true;
		const { width: containerWidth } = await ctx.$uv.getRect('.scroll-container');
		const { width: listWidth } = await ctx.$uv.getRect('.scroll-container .list');
		ctx.$uv.getRect('.scroll-container .list .item').then(res => {
			rect.itemWidth = res.width + 40;
		})
		const { width: indicatorWidth } = await ctx.$uv.getRect('.indicator');
		const { windowWidth } = uni.$uv.sys();
		rect.listWidth = Math.max(listWidth, 1);
		rect.indicatorWidth = indicatorWidth;
		rect.containerWidth = containerWidth;
		rect.windowWidth = windowWidth;
		scroll.showBtn = listWidth > containerWidth;
		// console.log(rect)
	}
	// 鼠标滚轮事件
	function wheelEvent() {
		let deltaY = null;
		const scrollContainer = document.getElementById('scroll_container');
		scrollContainer.addEventListener('wheel', (event) => {
			event.preventDefault();
			if (scroll.showBtn) {
				scroll.status = 'wheel';
				const scrollAmount = event.deltaY / 5;
				if (deltaY && scrollAmount != deltaY) {
					deltaY = null;
					return;
				}
				deltaY = scrollAmount;
				scroll.percentage += scrollAmount;
				if (scroll.percentage <= 0) scroll.percentage = 0;
				if (scroll.percentage >= 100) scroll.percentage = 100;
				uni.$uv.sleep(200).then(res => {
					scroll.status = '';
				})
			}
		})
	}
	// 拖动触发
	function movableChange(e) {
		if (!scroll.status) {
			scroll.percentage = Math.min(100, Number((e.detail.x / (rect.indicatorWidth - barWidth.value) * 100).toFixed(2)));
		}
	}
	// 点击按钮
	function scrollBtnClick(type) {
		scroll.status = 'click';
		let percentage = rect.itemWidth / (rect.listWidth - rect.containerWidth) * 100;
		scroll.percentage += percentage * type;
		scroll.percentage = Math.min(Math.max(scroll.percentage, 0), 100);
		uni.$uv.sleep(200).then(res => {
			scroll.status = '';
		})
	}
	defineExpose({
		getRect
	})
</script>
<style scoped lang="scss">
	.scroll-container {
		position: fixed;
		top: 80px;
		bottom: 91px;
		z-index: 9;
		overflow-x: hidden;
		width: 100%;
		.list {
			position: absolute;
			top: 50%;
			transition: transform 0.4s cubic-bezier(0.26, 0.63, 0.35, 0.95) 0s;
			margin-top: -30px;
		}
		.indicator {
			position: fixed;
			left: 50%;
			top: 50%;
			width: 272px;
			height: 6px;
			transform: translate(-50%);
			margin-top: 256px;
			.movable-area {
				width: 100%;
				height: 100%;
				background: #58587C;
				.movable-view {
					height: 100%;
					align-items: center;
				}
			}
			.bar {
				align-items: center;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				height: 6px;
			}
		}
		.scroll-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			&-left {
				left: 0;
			}
			&-right {
				right: 10px;
			}
		}
	}
	@media screen and (max-width: 1600px) {
		.scroll-container .indicator {
			margin-top: 200px;
		}
	}
</style>